<template>
    <el-scrollbar height="84vh">
        <ul>
            <li v-for="u in users" class="everyFocus">
                <el-link underline="never">
                    <el-image :src="u.imgSrc" class="userImg"></el-image>
                </el-link>
                <el-link underline="never" class="userName">
                    <h2>{{ u.name }}</h2>
                </el-link>
                <p>{{ u.Sig }}</p>

            </li>
        </ul>
    </el-scrollbar>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

interface user {
    imgSrc: string,
    name: string,
    Sig: string,
}
let users: user[] = reactive([
    { imgSrc: '', name: '小红', Sig: '吃饭睡觉打豆豆' },
    { imgSrc: '', name: '小红', Sig: '吃饭睡觉打豆豆' },
    { imgSrc: '', name: '小红', Sig: '吃饭睡觉打豆豆' },
    { imgSrc: '', name: '小红', Sig: '吃饭睡觉打豆豆' },
    { imgSrc: '', name: '小红', Sig: '吃饭睡觉打豆豆' },
    { imgSrc: '', name: '小红', Sig: '吃饭睡觉打豆豆' },
    { imgSrc: '', name: '小红', Sig: '吃饭睡觉打豆豆' },
    { imgSrc: '', name: '小红', Sig: '吃饭睡觉打豆豆' },
    { imgSrc: '', name: '小红', Sig: '吃饭睡觉打豆豆' },
    { imgSrc: '', name: '小红', Sig: '吃饭睡觉打豆豆' },
    { imgSrc: '', name: '小红', Sig: '吃饭睡觉打豆豆' },
])
</script>


  
<style scoped>
.everyFocus {
    position: relative;
    width: 100%;
    height: 15vh;
    background-color: #fff;
    margin-bottom: 3vh;
}

.userName {
    position: absolute;
    top: 1vh;
    left: 9vw;
}

.userImg {
    width: 13vh;
    height: 13vh;
    border-radius: 50%;
    margin-left: 1vw;
    margin-top: 1vh;
}



.everyFocus p {
    position: absolute;
    display: inline-block;
    top: 6vh;
    left: 9vw;

}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    display: inline-block;
    list-style: none;
}
</style>